<template>
  <div class="const_box">
    <div class="pop-up" v-if="history_upd">
      <div>宿舍用电能耗统计</div>
      <i class="el-icon-error" @click="handleClose"></i>
      <div class="pop-up-back">
        <div>
          <div>
            <span class="title_name">时间： </span>
            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
          <div>
            <el-button-group>
              <el-button type="primary" :class="active_data == 1 ? 'button_date_active' : 'button_date'"
                @click="handledata(1)">按时</el-button>
              <el-button type="primary" :class="active_data == 2 ? 'button_date_active' : 'button_date'"
                @click="handledata(2)">按日</el-button>
              <el-button type="primary" :class="active_data == 3 ? 'button_date_active' : 'button_date'"
                @click="handledata(3)">按月</el-button>
              <el-button type="primary" :class="active_data == 4 ? 'button_date_active' : 'button_date'"
                @click="handledata(4)">按周</el-button>
            </el-button-group>
          </div>
        </div>
        <div ref="electro_power" v-if="history_upd" style="width: 1300px; height: 580px"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
import api from "../api/api";
import parsing from "../assets/js/parsing";
var barChartOptions = {
  title: {
    text: "用电量   |   分闸次数",
    textStyle: {
      color: "#ffffff",
    },
    x: "center",
    y: "top",
    textAlign: "left",
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
    textStyle: {
      color: "#ffffff",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: [
    {
      type: "category",
      data: [
        "09-30 00:05:30",
        "09-30 00:05:35",
        "09-30 00:05:40",
        "09-30 00:05:45",
        "09-30 00:05:50",
        "09-30 00:05:55",
        "09-30 00:10:30",
        "09-30 00:10:40",
        "09-30 00:10:50",
        "09-30 00:20:30",
        "09-30 00:30:30",
        "09-30 00:40:30",
        "09-30 00:50:30",
        "09-30 01:10:30",
      ],
      axisTick: {
        alignWithLabel: true,
      },
    },
  ],
  yAxis: {
    type: "value",
  },
  dataZoom: [
    {
      //默认为滚动条型数据区域缩放组件
      show: true,
      start: 40,
      end: 0,
    },
  ],
  series: [
    {
      name: "用电量",
      type: "bar",
      stack: "Total",
      barWidth: "40%",
      data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310],
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ffffff",
        },
      },
      itemStyle: {
        normal: {
          color: "#049582",
        },
      },
    },
    {
      name: "分闸次数",
      data: [300, 2, 3, 5, 7, 290, 330, 310, 250, 300, 2, 3, 5, 7, 290, 330, 310, 250],
      type: "scatter",
      symbolSize: 20,
      itemStyle: {
        normal: {
          color: "#f59a23",
        },
      },
    },
  ],
};
export default {
  setup(props, conts) {
    // 获取标签容器
    const electro_power = ref(null);
    const history_upd = ref(conts.attrs.history_upd);
    const active_data = ref(conts.attrs.active_data);
    const histor_data = conts.attrs.histor_data;
    const seach_form = reactive({
      devType: histor_data.devType,
      imei: histor_data.imei,
      shunt: Number(histor_data.shunt),
      field: null,
      startTime: parsing.getcurrentdate(),
      endTime: parsing.getcurrentdate(),
      pageNum: 1,
      pageSize: 50,
    });
    onMounted(async () => {
      // 初始化
      getDormitoryEnergy();
      let barChart = echarts.init(electro_power.value);
      barChart.setOption(barChartOptions);
      window.onresize = function () {
        //自适应大小, 不用的话不会自适应大小。
        barChart.resize();
      };
    });
    //宿舍用电能耗排名
    const getDormitoryEnergy = () => {
      var roomNum = [];
      var electricityAmountstatistics = [];
      api.postFormAPI("backup/deviceData/influxData", seach_form).then((res) => {
        if (res.data.code == 1) {
        }
      });
    };
    const handleClose = () => {
      history_upd.value = false;
      conts.emit("handleClose", history_upd);
    };
    return { seach_form, history_upd, electro_power, active_data, handleClose };
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/common.css";

.upload-demo &:deep(.el-upload--text) {
  height: 50px;
  width: auto;
  border: 0;
}

&:deep(.el-upload-list__item-name) {
  display: none;
}

.pop-up {
  position: fixed;
  z-index: 999;
  height: 100%;
  width: 100%;
  top: 10%;
  background: #2e2c2c78;
}

.el-icon-error {
  position: fixed;
  top: 10%;
  right: 10%;
  color: rgb(230, 231, 236);
  font-size: 38px;
}


.pop-up .pop-up-back>div {
  padding: 10px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: row;
  justify-content: center;
}

.pop-up .pop-up-back {
  overflow-x: auto;
  position: fixed;
  color: #fff;
  width: 80%;
  height: 80%;
  top: 15%;
  left: 12%;
  background: rgb(12 30 66);
}

#electric_leakage {
  overflow-x: auto;
}

.select_build {
  margin-left: 30px;
}

&:deep(.el-input__inner) {
  width: 150px !important;
}

&:deep(.el-input) {
  width: 150px !important;
}
</style>
